<!-- 模块说明 -->

<script setup lang='ts'>
// @ts-ignore
import { ref } from "vue"
import { Register } from "../../api/register";
// @ts-ignore
import { useRoute, useRouter } from "vue-router"
// @ts-ignore
import { showToast } from "vant"

const route = useRoute()
const router = useRouter()
const username = ref<string>((route.query.tel as string) || "");
const password = ref("")

const submit = async (value:any)=> {
  let res = await Register['register'](value.username,value.password);
  // console.log(res, "注册");
  // @ts-ignore
  if (res.code == '1') {
    showToast("注册成功，即将跳转页面")
    setTimeout(() => {
     
      router.push("/")
    }, 2000)
  } else {
    showToast(res.data.message)
  }
}
const onFailed = () => {
  showToast("失败")
};


</script>

<template>
  <div class="register">
    <van-form @failed="onFailed" @submit="submit">
      <van-cell-group>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field v-model="username" name="username" placeholder="请输入用户名"
          :rules="[{ required: true, message: '请输入正确用户名！' }]" />

        <div class="box"></div>
        <!-- 通过 validator 进行函数校验 -->
        <van-field v-model="password" name="password" type="password" placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' }]" />
        <!-- 通过 validator 返回错误提示 -->
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="warning" native-type="submit"> 注册 </van-button>
      </div>
    </van-form>

  </div>
</template>

<style lang="scss" scoped>
.register {
  display: flex;
  height: 100%;
  width: 100vw;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  box-sizing: border-box;
  background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F01%2F20200301101008_eaymb.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1712283645&t=f64e8b7a757eefae60fe2c5f2b76f1ea);
  background-size:100%;
  background-repeat: no-repeat;


  .van-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .box{
    height: 20px;
    width: 100%;
    background-color: transparent;
  }
  


  .van-cell-group{
    background: transparent;
  }
}
</style>
